import Head from "next/head";
import Header from "@/components/Header";
import Cities from "@/components/Cities";
import HostRegisterCard from "@/components/HostRegisterCard";
import Categories from "@/components/Categories";
import Houses from "@/components/Houses";
import Footer from "@/components/Footer";
import Link from "next/link";

export default function Home({ houses, categories }) {
  return (
    <div className="bg-gray-50">
      <Head>
        <title>Road Bed</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/road_icon.png" />
      </Head>

      <Header />

      <div className="max-w-7xl mx-auto">
       
        <div className="flex justify-between items-center">
          <div className="px-8 sm:px-16 text-center">
            <h2 className="text-4xl sm:text-5xl pb-8 pt-6 font-bold text-teal-600">
              Welcome to RoadBed
            </h2>
            <p className="hidden lg:inline-block text-xl lg:text-3xl pb-10 text-gray-500">
              Find your dream house or start earning income by renting your
              house.
            </p>
            <div>
              <Link href="#city">
                <button
                  className="text-sm sm:text-md font-bold bg-[#ed6172] px-8 py-4
                rounded-full cursor-pointer transition duration-200 ease-in-out 
                hover:scale-105 hover:shadow-xl active:scale-90
                text-white"
                >
                  Explore the World
                </button>
              </Link>
            </div>
          </div>
          <img
            className=""
            src="/entry_bg.png"
            alt="https://storyset.com/home"
          />
        </div>
      </div>

      <section>
        <Categories categories={categories} />
      </section>

      <section>
        <Houses houses={houses} />
      </section>

      <HostRegisterCard />

      <section id="city">
        <Cities />
      </section>

      <footer>
        <Footer />
      </footer>
    </div>
  );
}

export async function getServerSideProps() {
  const houses = await fetch("http://localhost:8080/houses/getall").then(
    (res) => res.json()
  );

  const categories = await fetch(
    "http://localhost:8080/categories/getall"
  ).then((res) => res.json());

  return {
    props: {
      houses,
      categories,
    },
  };
}
